 <template>
	<div id="address">
		<div class="search-wrap">
			<input class="search" type="text" name="search" placeholder="请输入搜索联系人" v-model="searchInput">
			<img src="../../static/img/search.png" class="search-img">
		</div>
		<p>共有<span>{{ itemsClone.length }}</span>个联系人</p>
		<div>
			<div class="radios">
				<label>
					<input type="radio" name="contacts" value="all" v-model="type">所有联系人
				</label>
				<label>
					<input type="radio" name="contacts" value="kinsfolk" v-model="type">亲人
				</label>
				<label>
					<input type="radio" name="contacts" value="friend" v-model="type">朋友
				</label>
				<label>
					<input type="radio" name="contacts" value="classmate" v-model="type">同学
				</label>
			</div>
			<ul class="grid">
				<li v-for="item in itemsClone">
					<note-item :item="item" @remove="removeTodo"></note-item>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import noteItem from './noteItem'
import api from '../api/api'

export default {
	name:"Address",
	components:{
		noteItem,
	},
	data:function() {
		return {
			type:"all",
			selectStatus:"",
			items:[],
			contactId:0,
			itemsClone:[],
			searchInput:'',
			url:'../../static/basicdata.json',
			ite:[]
		}
	},
	created() {
		// if(localStorage.contacts){
		// 	this.items = JSON.parse(localStorage.contacts);
		// 	this.itemsClone = this.items;
		// } else {
		// 	api.getData(this.url,this.dealData);
		// };

	},
	watch:{
		type: 'select',
		searchInput:'search',
	},
	methods:{
		dealData:function(val) {
			this.items = val.data.items;
			this.items.forEach(item => {
                item.id = this.contactId++;
                item.imgSrc = '../../static/img/userImg.png';
            });
            this.itemsClone = this.items;
            this.loadToLocal();
		},
		removeTodo:function(id) {
			this.items = this.items.filter(item => {
				return item.id !== id;
			});
			this.itemsClone = this.items;
		},
		select:function() {
			if(this.type === "all"){
				this.itemsClone = this.items;
			}else {
				switch (this.type){
					case "kinsfolk": this.selectStatus = "亲人";
					break;
					case "friend": this.selectStatus = "朋友";
					break;
					case "classmate": this.selectStatus = "同学";
					break;
				}
				this.itemsClone = this.items.filter((item) => {
					return this.selectStatus === item.status;
				})
			}
		},
		search:function() {
			this.itemsClone = this.items;
			 if(this.searchInput) {
                	this.itemsClone = this.itemsClone.filter((item)=> {
                          	return (item.name.indexOf(this.searchInput) != -1);
                     	});
                }
		},
		loadToLocal:function() {
			if (window.localStorage) {
			    localStorage.setItem("contacts",JSON.stringify(this.items));
			} else {
			    Cookie.write("contacts", JSON.stringify(this.items));
			}
			var strStoreDate = window.localStorage? localStorage.getItem("contacts"): Cookie.read("contacts");
			// console.log(this.items);
			console.log(strStoreDate);
		}
	}
}
</script>

<style>
#address .search-wrap {position: relative;margin: 50px 0 15px 0;}
#address .search {width: 100%;height: 40px;padding: 0 35px 0 10px;border-radius: 5px;border: 1px solid #ccc;box-sizing: border-box;}
#address .search-img {width: 20px;position: absolute;right: 0;top:0;margin: 10px;}
#address .radios {margin:8px 0 15px 0;}
#address .grid {display: flex;flex-wrap:wrap;justify-content:space-around;}
#address ul {overflow: scroll;height: 400px;}
#address li {width: 28%; min-width: 210px;height: 65px;}

</style>